/*
 * @Descripttion: 
 * @Author: cuidm
 * @Date: 2022-03-31 14:58:28
 * @LastEditors: cuidm
 * @LastEditTime: 2022-10-13 18:02:17
 */
import React, { useEffect, useState } from "react";
import { Affix, Button, Alert, Radio, Select, Input, Space, Row, Col, Empty } from "antd";
import request, { exportFile } from "@/utils/request";
import { LeftOutlined } from "@ant-design/icons";
import { CmdbContent, CmdbHeader, TopologyTree} from "@/components";
import { Resizable } from 'react-resizable';
import Topology from "./topology";
import "./index.less";

const AllModelTopology = ({ history, match, location }) => {
    const isEdit = match?.params?.edit == 'edit';
    const [leftWidth, setLeftWidth] = useState(230);
    const [selectedKeys, setSelectKeys] = useState([]);

    const onView = (keys) => {
        setSelectKeys(keys);
    }
    
    return (
        <CmdbContent style={{position: 'relative'}}>
            <CmdbHeader title="全景模型拓扑" />
            <div style={{position: 'absolute', left: 120, top: 4}}>
                {
                    isEdit ? 
                    <>
                        <Button 
                            icon={<LeftOutlined />} 
                            type="primary" 
                            style={{marginRight: 10}}
                            onClick={() => {
                                history.push({
                                    pathname: '/model/all-topology'
                                })
                            }}
                        >
                        | 返回
                        </Button> 
                        所有更改自动保存
                    </> :
                    <Button 
                        type="primary"
                        onClick={() => {
                            history.push({
                                pathname: '/model/all-topology/edit'
                            })
                        }}
                    >
                        编辑拓扑
                    </Button>
                }
            </div>
            <section className="hcp__page">
                <section className="hcp__page__container resource-model-graph-group">
                    <div className="main-views">
                        <Resizable
                            width={leftWidth}
                            axis='x'
                            height={0}
                            minConstraints={[200]}
                            maxConstraints={[400]}
                            handle={React.createElement('span', {
                                className: `react-resizable-handle`,
                                onClick: (e) => {
                                    e.stopPropagation();
                                },
                            })}
                            onResize={(event, { element, size })=> {setLeftWidth(size.width);}}
                            draggableOpts={{ enableUserSelectHack: false }}
                        >
                            <div style={{width: leftWidth, height:'100%', float: 'left', marginRight: 10}}>
                                <TopologyTree onView={onView}/>
                            </div>
                        </Resizable>
                        <div style={{width: `calc(100% - ${leftWidth}px - 10px)`}} className="right-content">
                            <Topology history={history} hideModels={selectedKeys} isEdit={isEdit}/>
                        </div>
                    </div>
                </section>
            </section>
        </CmdbContent>
    );
};

export default AllModelTopology;
